<!--  -->
<template>
    <div class=''>
        <!-- <h2>自定义指令</h2>
        <h2>混入</h2>
        <h2>组件通信 provide inject $attrs和$listeners 中央事件总线/全局事件总线  消息订阅与发布</h2>
        
        <h2>nexttick的使用</h2>
        <h2>vue中sync的理解 --自己看博客</h2>
        <h2>组件间 父子组件生命周期执行顺序的问题</h2>

        <input type="text" v-focus />
        <div v-has="{color:'#f00',text:'web2418'}"></div>
        <h2>{{ name }}</h2>
        <h2>{{ age }}</h2>
        <h2>{{ bar }}</h2>
        <h2>-------------------------</h2> -->
        <button @click="add">中央事件总线</button>
        <button @click="addSub">消息订阅与发布</button>

        <h2>-------------------------</h2>
        <button ref="btn" @click="testClick">{{ content }}</button>
    </div>
</template>

<script>
import {getNameMixin} from '@/mixins/getNameMixin'
import PubSub from 'pubsub-js'// 第一步 安装并引入pubsub-js
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
           name:'合肥一元',
           bar:'112233',
           content: '初始值222'
        };
    },
    mixins:[getNameMixin],
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 全局事件总线 第二步
       add(){
        // this.$bus.$emit('addmsg',{name:this.name})

        //定义了一个bus.js的写法 第三步  第四步在FatherView里面
        this.$EventBus.$emit('addmsg',{name:this.name})
       },
       //第二步  发布消息 发出去
       addSub(){
        PubSub.publish('addDataList',{name:this.name})
       },
       testClick(){
          this.content = '改变了的值'
        //   this.$nextTick(()=>{
        //     console.log(this.$refs.btn.innerText);
        //   })
        setTimeout(() => {
            console.log(this.$refs.btn.innerText);
        }, 500);
       }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('组件内created');
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
       
    },
    directives: {
        // focus:{
        //     inserted:function(el,binding){
        //         console.log(el);
        //         console.log(binding);
        //     }
        // }
        // 简写
        // focus: function (el, binding) {
        //     console.log(el);
        //     console.log(binding);
        // }
        focus:(el, binding)=> {
            console.log(el);
            console.log(binding);
        },
        // has:{
        //     inserted:function(el,binding){
        //          el.innerHTML = binding.value.text
        //          el.style.backgroundColor = binding.value.color
        //     }
        // }

    }
}
//总结：
// 1.混入
//1. 当组件和混入(mixin)对象含有同名数据时，这些数据会进行“合并”，并且组件优先级最高，非同名数据会放到一个对象里面
//2. 当组件和混入(mixin)对象含有同名生命周期钩子函数时，这些生命周期钩子函数会“合并”为一个数组，并且混入对象内的函数优先调用，组件自身函数后调用
//3. 组件和混入(mixin)对象中的methods、components 和 directives，将被合并为同一个对象，如果有同名的冲突，以组件自身为准
// mixin也可以通过Vue.mixin的方式混入到全局中，使用时需要格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例，这是非常危险的行为
// mixin的缺点:
// 命名冲突，data、生命周期、methods、components、directives等都会出现冲突现象
// 依赖不透明，不利于问题溯源，因为mixin 和使用它的组件之间没有层次关系
// 全局注册的mixin，会影响到整个实例下的所有组件，在使用过程中，容易出现察觉不到的问题


// 2. 全局事件总线（$bus   EventBus）
// 一种组件间通信的方式，适用于任意组件间通信

// 3.
// 1.1.挂载阶段
// 该过程主要涉及 beforeCreate、created、beforeMount、mounted 4 个钩子函数。执行顺序为：
// 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
// 一定得等子组件挂载完毕后，父组件才能挂在完毕，所以父组件的 mounted 在最后。

// 1.2.更新阶段
// 该过程主要涉及 beforeUpdate、updated 2 个钩子函数。注意，当父子组件有数据传递时，才有这个更新阶段执行顺序的比较。执行顺序为：
// 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

// 1.3.销毁阶段
// 该过程主要涉及beforeDestroy、destroyed 2 个钩子函数。执行顺序为：
// 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

// 4.this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类</style>